<template>
  <Popup v-model:show="showModal" :title="props.title || '品牌'" @scrolltolower="loadPagingMore" canceltext="清空选项"
    @refresherrefresh="initPagingQuery" openrefresher :refresher="pagingInfo.loading" @submit="onSubmit" @cancel="onCancel">
    <view class="brand-list">
      <view :class="`brand-item ${paramsInfo.brandId === itm.id && 'brand-active'}`" @click="paramsInfo.brandId = itm.id"
        v-for="(itm) in pagingInfo.list" :key="itm.id">
        <image class="brand-logo" :src="itm.icon"></image>
        <view class="item-icon one-ellipsis">{{ itm.name }}</view>
      </view>
    </view>
    <NoData :list="pagingInfo.list" title="暂无数据" :loading="pagingInfo.loading" :total="pagingInfo.total" />
  </Popup>
</template>

<script setup>
import { watch, ref } from "vue"
import Popup from "@/components/ui/popup"
import { useShowModal } from "@/path/hooks/v-model"
import service from "@/path/service"
import NoData from "@/components/tool/no-data"
import { usePagingQuery } from "@/path/hooks";
import { debounce } from "@/path/until";
const props = defineProps({
  show: Boolean,
  title: String,
  name: String,
  params: Object,
})
const emit = defineEmits(['update:show', 'update:params', 'update:name'])
const { showModal } = useShowModal(props, emit)

function getList(params) {
  return service.get("api/ycg/car/brand", params)
}
const { pagingInfo, initPagingQuery, loadPagingMore } = usePagingQuery(getList, { pageSize: 20 })
initPagingQuery()


const paramsInfo = ref(props?.params || {})
watch(() => props?.params, () => {
  paramsInfo.value = { ...(props?.params || {}) };
}, { immediate: true, deep: true });
function onSubmit() {
  emit("update:params", { ...paramsInfo.value });
  const _item = (pagingInfo.list || []).find(v => v.id === paramsInfo.value.brandId)
  emit("update:name", _item.name);
}
function onCancel() {
  emit("update:params", null);
  emit("update:name", "");
}
</script>

<style lang="less" scoped>
.brand-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .brand-item {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 32rpx;
    font-size: 24rpx;
    color: #666;

    .brand-logo {
      width: 96rpx;
      height: 96rpx;
      border-radius: 32rpx;
      border: 2px solid #f5f5f5;
      background-color: #f5f5f5;
    }

    .item-icon {
      width: 100%;
      text-align: center;
    }

    &.brand-active {
      .brand-logo {
        border: 2px solid #9CDB14;
      }
    }
  }
}
</style>
